<template>
<!--	<el-dialog class="setting" title="修改密码" :visible.sync="visible"  width="500px" :before-close="onClose">
		<el-form :model="userInfo" label-width="80px" :rules="rules" ref="settingForm">
			<el-form-item label="头像" v-if="false">
				<file-upload  class="avatar-uploader"
				:action="imageAction"
				:showLoading="true"
				:maxSize="maxSize"
				@success="onUploadSuccess"
				:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
					<img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</file-upload>
			</el-form-item>
			<el-form-item label="账号" v-if="false">
				<el-input disabled v-model="userInfo.userName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item prop="nickName" label="用户姓名" v-if="false">
				<el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="性别" v-if="false">
				<el-radio-group v-model="userInfo.sex">
					<el-radio :label="0">男</el-radio>
					<el-radio :label="1">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="个性签名" v-if="false">
				<el-input type="textarea" v-model="userInfo.signature"></el-input>
			</el-form-item>
		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button @click="onClose()">取 消</el-button>
			<el-button type="primary" @click="onSubmit()">确 定</el-button>
		</span>
	</el-dialog>-->


    <el-dialog class="setting" title="修改密码" :visible.sync="visible"  width="500px" :before-close="onClose">
        <el-form :model="formData" label-width="80px" :rules="rules" ref="settingForm">
            <!--<el-form-item label="头像" v-if="false">
                <file-upload  class="avatar-uploader"
                              :action="imageAction"
                              :showLoading="true"
                              :maxSize="maxSize"
                              @success="onUploadSuccess"
                              :fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
                    <img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </file-upload>
            </el-form-item>
            <el-form-item label="账号" v-if="false">
                <el-input disabled v-model="userInfo.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="nickName" label="用户姓名" v-if="false">
                <el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" v-if="false">
                <el-radio-group v-model="userInfo.sex">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="个性签名" v-if="false">
                <el-input type="textarea" v-model="userInfo.signature"></el-input>
            </el-form-item>-->

            <el-form-item prop="oldPassword" label="原密码" >
                <el-input  v-model="formData.oldPassword" placeholder="请输入原密码"  autocomplete="off"  show-password="true" maxlength="6"></el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码" >
                <el-input  v-model="formData.newPassword" autocomplete="off" placeholder="请输入新密码" show-password="true" maxlength="6"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码" >
                <el-input  v-model="formData.confirmPassword" autocomplete="off" placeholder="请确认新密码" show-password="true" maxlength="6" ></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
			<el-button @click="onClose()">取 消</el-button>
			<el-button type="primary" @click="onSubmitPass()">确 定</el-button>
		</span>
    </el-dialog>
</template>

<script>
	import FileUpload from "../common/FileUpload.vue";

	export default {
		name: "setting",
		components: {
			FileUpload
		},
		data() {
            var validatePass2 = (rule, value, callback) => {
                if (this.formData.confirmPassword != this.formData.newPassword) {
                    callback("两次输入的密码不一致");
                }else {
                    callback();
                }
            };

			return {
                formData: {
                    oldPassword: "",
                    newPassword: "",
                    confirmPassword: ""
                },
				userInfo: {

				},
				maxSize: 5*1024*1024,
				action: "/image/upload",
				/*rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}]
				}*/
                rules: {
                    oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'},{ min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'}],
                    newPassword: [{
                            required: true,
                            message: '请输入新密码',
                            trigger: 'blur'
                        }, { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'}],
                    confirmPassword: [{
                            required: true,
                            message: '请输入确认密码',
                            trigger: 'blur'
                        }, { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'},{
                        validator: validatePass2, trigger: 'blur'
                    }]
                }
			}
		},
		methods: {

			onClose() {
                this.$refs['settingForm'].resetFields(); // 清空表单校验结果
                this.$emit("close");
			},
            onSubmitPass() {
                this.$refs['settingForm'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$http({
                        url: "/modifyPwd",
                        method: "put",
                        data: this.formData
                    }).then(()=>{
                        this.$refs['settingForm'].resetFields(); // 清空表单校验结果
                        this.$emit("close");
                        this.$message.success("修改成功");
                    })
                });
            },
			onSubmit() {//更新用户信息
				this.$refs['settingForm'].validate((valid) => {
					if (!valid) {
						return false;
					}
					this.$http({
						url: "/user/update",
						method: "put",
						data: this.userInfo
					}).then(()=>{
						this.$store.commit("setUserInfo",this.userInfo);
						this.$emit("close");
						this.$message.success("修改成功");
					})
				});
			},
			onUploadSuccess(data, file) {
				this.userInfo.headImage = data.originUrl;
				this.userInfo.headImageThumb = data.thumbUrl;
			}
		},
		props: {
			visible: {
				type: Boolean
			}
		},
		computed:{
			imageAction(){
				return `/image/upload`;
			}
		},
		watch: {
			visible: function(newData, oldData) {
				// 深拷贝
				let mine = this.$store.state.userStore.userInfo;
				this.userInfo = JSON.parse(JSON.stringify(mine));
			}
		}
	}
</script>

<style lang="scss" >
	.setting {

		.avatar-uploader {

			.el-upload {
				border: 1px dashed #d9d9d9 !important;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
		}
	}
</style>
